<template>
	<view class="personalInfo  ">

		<view class="personalBox bgWhite radius8">
			<uv-form labelPosition="left" :model="personaModel" :rules="personalRules" :labelStyle="labelStyle"
				ref="form">
				<uv-form-item label="分类" borderBottom labelWidth="140rpx">
					<view class="align-center justify-end" @click="showPicker">
						{{cateName||'请选择'}} <uv-icon name="arrow-right"></uv-icon>
					</view>
				</uv-form-item>
				<uv-form-item label="商品名称" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.title" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="付款周期" borderBottom labelWidth="140rpx">
					<view class="align-center">
						<uv-input inputAlign="right" v-model="personaModel.zhouqi" border="none"
							placeholder="请输入">
						</uv-input>
						月
					</view>
				
				</uv-form-item>
				<view class="ft12" style="color: #999;">
					* 订单付款总时长
				</view>


				<uv-form-item label="期数" borderBottom labelWidth="140rpx">
					<view class="align-center">
						<uv-input inputAlign="right" v-model="personaModel.qishu" @input="changeNum" border="none"
							placeholder="请输入">
						</uv-input>
						期
					</view>

				</uv-form-item>
				<view class="ft12" style="color: #999;">
					*目前一期为三个月
				</view>
				<uv-form-item label="每期金额" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" @input="changeNum" v-model="personaModel.qishu_price" border="none"
						placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="商品总价" borderBottom labelWidth="140rpx">
					<view class="flex1 justify-end">
						{{personaModel.price||''}}
					</view>
					<!-- <uv-input inputAlign="right"  v-model="personaModel.price" border="none" placeholder="请输入">
					</uv-input> -->
				</uv-form-item>
				<uv-form-item label="平台佣金" borderBottom labelWidth="140rpx">
					<uv-input inputAlign="right" v-model="personaModel.yongjin" border="none" placeholder="请输入">
					</uv-input>
				</uv-form-item>
				<view class="ft12" style="color: #999;">
					*佣金与商品排序有关，请供应商按照需求填写
				</view>
			</uv-form>
		</view>
		<view class="personalBox bgWhite radius8 mt12 ">
			<view class="moneydesc pt15">
				商品图片 <text>请上传商品图片（最多6张）</text>
			</view>
			<view class="align-center flex-wrap justify-start">
				<view class="mr10 mt5 posRelative" v-for="(i,n) in imgList" :key="n">
					<image style="width: 180rpx;height: 180rpx;border-radius: 15rpx;" :src="i" mode=""></image>
					<view @click="del(n)" class="posAbsort" style="right: 10rpx;top: 10rpx">
						<uv-icon name="close-circle"></uv-icon>
					</view>
				</view>

			</view>
			<view v-if="imgList.length<6" class="plus align-center justify-center" @click="uploadImg">
				<uv-icon color="#B0B0B0" size="25" name="plus"></uv-icon>
			</view>
		</view>
		<view class="personalBox bgWhite radius8 mt12" @click="toEdit">
			<view class="moneydesc pt15 justify-between">
				商品详情
				<view class="align-center ft15" style="color: #999;line-height: 30rpx;">
					编辑 <uv-icon name="arrow-right" size="12"></uv-icon>
				</view>
			</view>
			<uv-parse :content="personaModel.json" :tagStyle="style"></uv-parse>

		</view>
		<view class=" ft13 mt10" style="color: #999;">
			如需添加分类，请联系客服。
			<br />
			商品在经后台审核后方能上架
		</view>
		<view class="save_btn" @click="save">
			提交
		</view>


		<uv-picker ref="areaPicker" :columns="areaRrand" keyName="name" @change="carChange"
			@confirm="areaConfirm"></uv-picker>
	</view>
</template>

<script>
	import {
		promise
	} from '../../uni_modules/uv-ui-tools/libs/function/test';
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				labelStyle: {
					'height': '87rpx',
					'font-size': "30rpx",
					'color': '#000'
				},
				style: {
					img: "max-width:100%"
				},
				personaModel: {
					yongjin: "",
					type_id: "",
					qishu_price: "",
					price: "",
					qishu: "",
					title: "",
					two_id: '',
					json: "",
					images: '',
					image: '',
					zhouqi:""

				},
				personalRules: {},
				areaRrand: [
					[],
					[]
				],
				columnData: [],
				area: "",
				checkboxValue: [],
				cateList: [],
				cateName: "",
				cateData: [],
				imgList: [],
				loading: false
			};
		},

		onLoad(opt) {
			if (opt.id) {
				uni.setNavigationBarTitle({
					title:'商品编辑'
				})
				this.$api.goodsMain({
					id: opt.id
				}).then(res => {
					
					this.personaModel = res.data
					this.imgList = res.data.images?.split(',')
					this.personaModel.json = decodeURIComponent(this.personaModel.xiangqing).replaceAll('+',' ')
					console.log(this.personaModel.json)
				})
			}
			this.getCate()
		},
		mounted() {
			let vm = this
			uni.$on('detailJson', function(data) {
				console.log(data)
				vm.personaModel.json = data
			})
			if (this.personaModel.type_id) {
				let data = this.cateData.find(item => item.id == this.personaModel.type_id)
				this.cateName = data.name
				if (this.personaModel.two_id) {
					let datas = data.two_cate.find(i => i.id == this.personaModel.two_id)
					this.cateName += '-' + datas.name
					console.log(this.cateName)
				}
			}
		},
		onUnload() {
			uni.$off('detailJson')
		},
		methods: {

			carChange(e) {
				console.log(e)
				if (e.columnIndex == 0) {
					this.areaRrand[1] = this.cateData[e.index].two_cate

				}

				this.$forceUpdate()

			},
			areaConfirm(e) {
				this.cateName = ''
				this.personaModel.type_id = e.value[0].id
				this.personaModel.two_id = e.value.length > 1 ? e.value[1].id : ''
				let twoName = e.value.length > 1 ? '-' + e.value[1].name : ''
				console.log(twoName)
				this.cateName = e.value[0].name + twoName
			},

			showPicker() {
				this.$refs.areaPicker.open()
			},
			getCate() {
				this.$api.catelist().then(res => {
					console.log(res)
					this.cateData = res.data
					this.areaRrand = [res.data, res.data[0].two_cate]



				})
			},

			requestPromise(item) {
				return new Promise((resolve, reject) => {
					this.$api.uploadImg({
						filePath: item
					}).then(res => {
						resolve(res.data.fullurl); // 通常只需要 data
					})

				});
			},
			uploadImg(e) {
				let vm = this
				uni.chooseImage({
					sourceType: ['album'],
					count: 6 - this.imgList.length,
					success: function(res) {
						const requests = res.tempFilePaths.map(item =>
							vm.requestPromise(item)
						);
						Promise.all(requests)
							.then(dataList => {
								vm.imgList = vm.imgList.concat(dataList)
							})
							.catch(err => {});

						
					}
				})
			},
			del(n) {
				this.imgList.splice(n, 1)
			},
			changeNum() {
				this.personaModel.price = Number(this.personaModel.qishu) * Number(this.personaModel
					.qishu_price)
			},
			toEdit() {
				uni.navigateTo({

					url: '/pages/edtior/index?data=' + encodeURIComponent(this.personaModel.json)

				})
			},

			async save() {
				let vm = this
				// if (!vm.personaModel.realname) return vm.$utils.msg('请输入真实姓名')
				// if (!vm.personaModel.nickname) return vm.$utils.msg('请输入艺名')
				// if (!vm.personaModel.category_id) return vm.$utils.msg('请选择您的艺术类别')
				if (!vm.personaModel.two_id) return vm.$utils.msg('请选择二级分类')
				if (!vm.personaModel.title) return vm.$utils.msg('请输入商品名称')
				if (!vm.personaModel.zhouqi) return vm.$utils.msg('请输入付款周期')
				
				if (!vm.personaModel.price) return vm.$utils.msg('请输入商品价格')
				if (!vm.personaModel.qishu) return vm.$utils.msg('请输入期数')
				if (!vm.personaModel.qishu_price) return vm.$utils.msg('请输入每期价格')
				if (!vm.personaModel.yongjin) return vm.$utils.msg('请输入平台佣金')
				if (!vm.imgList.length) return vm.$utils.msg('请上传商品图片')
				vm.personaModel.image = vm.imgList[0]
				vm.personaModel.images = vm.imgList.join(',')
				if (vm.loading) return
				vm.loading = true
				uni.showLoading({})
				
				if (this.personaModel.id) {
					vm.$api.editgoods({
						id: vm.personaModel.id,
						yongjin: vm.personaModel.yongjin,
						type_id: vm.personaModel.type_id,
						qishu_price: vm.personaModel.qishu_price,
						price: vm.personaModel.price,
						qishu: vm.personaModel.qishu,
						title: vm.personaModel.title,
						two_id: vm.personaModel.two_id,
						json:  encodeURIComponent(vm.personaModel.json),
						images: vm.personaModel.images,
						image: vm.personaModel.image,
						zhouqi:vm.personaModel.zhouqi
					}).then(res => {
						vm.loading = false
						uni.hideLoading()
						if (res.code == 1) {
							vm.$utils.msg(res.msg)
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						} else {
							vm.$utils.msg(res.msg)
						}
					})
				} else {
					vm.$api.addgoods({...vm.personaModel,...{json: encodeURIComponent(vm.personaModel.json)}}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							vm.$utils.msg(res.msg)
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						} else {
							vm.$utils.msg(res.msg)
						}
					})
				}

			},

		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.header {
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
		line-height: 36rpx;

	}

	.personalInfo {

		padding: 22rpx;
		position: relative;

		.personalBox {
			padding: 0 32rpx 40rpx;

		}

		.save_btn {
			width: 100%;
			height: 90rpx;
			margin-top: 38rpx;
			margin-bottom: 40rpx;
			background: #49806F;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}

	}

	button {
		color: #303133;
		font-size: 28rpx;
		text-align: left;
	}

	image {
		width: 300rpx;
		height: 250rpx;

	}

	.textbox {
		width: 300rpx;
		height: 51rpx;
		background: #DFC199;
		border-radius: 0 0 10rpx 10rpx;
		font-weight: 400;
		font-size: 23rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 51rpx;
		bottom: 0;
		left: 0;
	}

	.plus {
		width: 200rpx;
		height: 200rpx;
		background: #F5F5F7;
		border-radius: 15rpx;
	}

	.xy {
		margin-top: 40rpx;

		text {}
	}

	.moneydesc {
		font-size: 30rpx;
		color: #333;
		margin: 50rpx 0 26rpx;

		text {
			font-size: 22rpx;
			color: #999999
		}
	}
</style>